import Frame from '../core/frame.js';


function getDataURL(imgElement) {
    // 创建一个新的Canvas元素
    var canvas = document.createElement('canvas');
    
    // 设置Canvas的宽度和高度为图片的宽度和高度
    canvas.width = imgElement.naturalWidth;
    canvas.height = imgElement.naturalHeight;
    
    // 获取Canvas的2D渲染上下文
    var ctx = canvas.getContext('2d');
    
    // 将图片绘制到Canvas上
    ctx.drawImage(imgElement, 0, 0);
    
    // 使用Canvas的toBlob方法获取图像的Blob数据
    var res = canvas.toDataURL();
    canvas = null;
    ctx = null;
    return res;
}

class ExtendedFrame extends Frame{
    constructor(...props){
        super(...props);
        this._temp = [0, 0, this.configs.minWidth, this.configs.minHeight];
        var template = document.getElementById("window").cloneNode(true);
        this.actionMenu = document.getElementById("actionmenu");
        this.icon = document.createElement("img");
        this.icon.setAttribute("draggable", 'false');
        this.icon.className = 'icon icon-open icon-open-active';
        this.icon.src = './static/images/12.png'; //Default icon
        this.icon.onclick = ()=>{this.visible=!this.visible;};
        this.actionMenu.append(this.icon);
        for(let child of Array.from(template.childNodes)){
            this.elem.append(child);
        }
        this._f = false;
        this.elem.classList.add('FUI_DEBUG');
        this.elem.querySelector('.ico').src = this.configs.icon;
        this.elem.querySelector('.ico').addEventListener("load", (e)=>{
            var ico = e.target;
            this.icon.src = getDataURL(ico);
        });
        this.elem.querySelector('.title').innerText = this.configs.title;
        this.elem.querySelector(".icon-close").addEventListener("click", ()=>this.remove());
        
        this.elem.querySelector(".icon-small").addEventListener("click", ()=>this.visible=false);
        this.fullBtn = this.elem.querySelector(".icon-full");
        this.fullBtn.addEventListener("click", ()=>this.fullScreen=!this.fullScreen);
        this.drag = false;
        this.dragPos = [0, 0];
        //             [top,   left,  bottom,right, isResizing]
        this.resizes = [false, false, false, false, false];
        this.lastMove = [0, 0];
        if(this.configs.src){
            this.iframe = document.createElement("iframe");
            this.iframe.src = this.configs.src;
            this.elem.append(this.iframe);
        }
        this.dragstartlistener = (e)=>{
            var top = e.pageY - this.elem.offsetTop;
            var left = e.pageX - this.elem.offsetLeft;
            var bottom = this.elem.offsetHeight - top;
            var right = this.elem.offsetWidth - left;
            Array.prototype.slice.call(document.getElementsByTagName('iframe'), 0).forEach(el => {
                el.style.display = 'none';
            });
            if(top < this.configs.resizeBorderWidth || left < this.configs.resizeBorderWidth || bottom < this.configs.resizeBorderWidth || right < this.configs.resizeBorderWidth){
                if(top < this.configs.resizeBorderWidth) this.resizes[0] = true;
                if(left < this.configs.resizeBorderWidth) this.resizes[1] = true;
                if(bottom < this.configs.resizeBorderWidth) this.resizes[2] = true;
                if(right < this.configs.resizeBorderWidth) this.resizes[3] = true;
                this.resizes[4] = true;
                this.lastMove[0] = e.pageX;
                this.lastMove[1] = e.pageY;
            }else{
                this.drag = true;
                this.dragPos = [
                    e.pageX - this.elem.offsetLeft, 
                    e.pageY - this.elem.offsetTop
                ];
            }
            if(this.fullScreen && (e.target.classList.contains('FUI_DEBUG')||e.target.classList.contains('telem'))){
                this._temp = [this.x, this.y, this.width, this.height];
                this.fullScreen = false;
            }
        };
        this.movelistener = (e)=>{
            if(this.drag){
                this.x = e.pageX - this.dragPos[0];
                this.y = e.pageY - this.dragPos[1];
            }else if(this.resizes[4]){
                var leftOffset = e.pageX - this.lastMove[0];
                var topOffset = e.pageY - this.lastMove[1];
                this.lastMove[0] = e.pageX;
                this.lastMove[1] = e.pageY;
                if(this.resizes[0]){
                    var val = this.height - topOffset;
                    if(val >= this.configs.minHeight) { 
                        this.height=val; 
                        this.y += topOffset;
                    }
                }
                else if(this.resizes[2]){
                    this.height += topOffset;
                }
                if(this.resizes[1]){
                    var val = this.width - leftOffset;
                    if(val >= this.configs.minWidth) { 
                        this.width=val; 
                        this.x += leftOffset;
                    }
                }
                else if(this.resizes[3]){
                    this.width += leftOffset;
                }
                this.elem.style.cursor = 'move';
            }else{
                var top = e.pageY - this.elem.offsetTop;
                var left = e.pageX - this.elem.offsetLeft;
                var bottom = this.elem.offsetHeight - top;
                var right = this.elem.offsetWidth - left;
                //console.log(top, left);
                if((top < this.configs.resizeBorderWidth || left < this.configs.resizeBorderWidth || bottom < this.configs.resizeBorderWidth || right < this.configs.resizeBorderWidth) && top > 0 && left > 0 && right > 0 && bottom > 0){
                    this.elem.style.cursor = 'move';
                }else{
                    this.elem.style.cursor = 'default';
                }
            }
        };
        this.uplistener = ()=>{
            this.drag = false;
            this.resizes[0] = false;
            this.resizes[1] = false;
            this.resizes[2] = false;
            this.resizes[3] = false;
            this.resizes[4] = false;
            Array.prototype.slice.call(document.getElementsByTagName('iframe'), 0).forEach(el => {
                el.style.display = 'block';
            });
        }
        this.elem.addEventListener("mousedown", this.dragstartlistener);
        window.addEventListener("mousemove", this.movelistener);
        window.addEventListener("mouseup", this.uplistener);
    }
    beforeRemove(){
        Array.prototype.slice.call(document.getElementsByTagName('iframe'), 0).forEach(el => {
            el.style.display = 'block';
        });
        this.elem.removeEventListener("mousedown", this.dragstartlistener);
        window.removeEventListener("mousemove", this.movelistener);
        window.removeEventListener("mouseup", this.uplistener);
        if(window.smoothRemove) window.smoothRemove(this.icon);
        else this.icon.remove();
    }
    set fullScreen(val){
        var isFull = !!val;
        if(isFull === this._f) return;
        this._f = isFull;
        if(isFull){
            this._temp = [this.x, this.y, this.width, this.height];
            this.x = 0;
            this.y = 0;
            this.width = this.parent.elem.offsetWidth;
            this.height = this.parent.elem.offsetHeight;
        }else{
            this.x = this._temp[0];
            this.y = this._temp[1];
            this.width = this._temp[2];
            this.height = this._temp[3];
        }
        this.fullBtn.src = (isFull ? "./images/10.png": "./images/9.png");
    }
    get fullScreen(){
        return this._f;
    }
    set visible(val){
        super.visible = val;
        if(val){
            if(!this.icon.classList.contains('icon-open-active')) this.icon.classList.add('icon-open-active');
        }else{
            if(this.icon.classList.contains('icon-open-active')) this.icon.classList.remove('icon-open-active');
        }
    }
    get visible(){
        return super.visible;
    }
}

if(!window.defines) window.defines = null;


export default ExtendedFrame;